<template>
	<view class="container" v-if="isLoding">
		<view class="top">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="imgs in info.carousel" :key="imgs.id">
					<view class="swiper-item">
						<image @tap="yulan" :src="imgs" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="title_father">
			<view class="title_box">
				<view class="name">
					{{info.name}}
				</view>
				<view class="pirce" v-for="(price,index) in specs" :key="price.id" v-if="index==choice">
					商家参考价：<span>￥{{price.price}}</span>
				</view>
			</view>
		</view>
		<view class="choice">
			<view class="choice_item" @tap="choiceOne(index)" :class="{active:index==choice}" v-for="(item,index) in specs" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="parameter" v-if="index==choice" v-for="(parameter,index) in specs" :key="index">
			<view class="title">
				参数
			</view>
			<view class="data">
				<view class="data_item" v-for="dui in parameter.parameter" :key="dui.id">
					{{dui.name}}:{{dui.value}}
				</view>
			</view>
			<view class="tu" v-for="photoset in parameter.photoset" :key="photoset.id">
				<image :src="photoset" mode=""></image>
			</view>
			<view class="contact">
				联系方式
			</view>
			<view class="phone">
				<view class="phone_box" @tap="dial(pItem)" v-for="(pItem,index) in hotline" :key="index">
					<view class="phone_item">
						客服电话:{{pItem.phone}}
					</view>
					<image src="../../../static/phne.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choice: 0,
				isLoding: false,
				info: '',
				specs: [], //参数
				hotline: [] //客服电话
			};
		},
		onLoad(e) {
			// console.log(e)
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl + '/index/car/read/' + e.id,
				method: 'GET',
				header: {
					token: e.token
				},
				data: {},
				success: res => {
					this.isLoding = true
					uni.hideLoading()
					if (res.data.code == 0) {
						this.info = res.data.data.info
						this.specs = res.data.data.info.specs
						this.hotline = res.data.data.hotline
					} else if (res.data.code == 3) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none',
							duration: 2000
						});
					}
					// console.log(res)
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon: 'none',
						duration: 2000
					});
					uni.hideLoading()
				},
				complete: () => {}
			});
		},
		methods: {
			yulan() {
				uni.previewImage({
					urls: this.info.carousel,
				});
			},
			dial(pItem) {
				uni.makePhoneCall({
					phoneNumber: pItem.phone //仅为示例
				});
			},
			choiceOne(index) {
				this.choice = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	page {
		height: 100%;
	}

	.container {
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: #f2f2f2;

		.top {
			width: 100%;
			height: 308upx;

			image {
				width: 100%;
				height: 308upx;
			}
		}

		.title_father {
			background: #FFFFFF;

			.title_box {
				margin: 0 30upx;
				display: flex;
				justify-content: space-between;
				border-top: 2upx solid #ECECEC;
				border-bottom: 2upx solid #ECECEC;
				padding: 20upx 0;

				.name {
					line-height: 30upx;
					// margin-top: 14upx;
					font-size: 34upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(52, 52, 52, 1);
				}

				.pirce {
					line-height: 24upx;
					margin-top: 8upx;
					// padding-bottom: 14upx;
					font-size: 28upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(52, 52, 52, 1);

					span {
						color: red;
						font-weight: bold;
					}
				}
			}
		}

		.choice {
			justify-content: space-around;
			display: flex;
			background: #FFFFFF;
			font-size: 24upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);

			.choice_item {
				padding: 16upx 0;
			}

			.choice_item:first-child {
				padding-left: 20upx;
				margin-left: -30upx;
			}

			.choice_item:last-child {
				padding-right: 20upx;
				margin-right: -30upx;
			}

			.active {
				border-bottom: 4upx solid #FE5621;
				color: #343434;
			}
		}

		.parameter {
			background: #FFFFFF;
			margin-top: 12upx;

			.title,
			.contact {
				width: 685upx;
				height: 60upx;
				background: rgba(254, 86, 33, 1);
				border-radius: 0upx 30upx 30upx 0upx;
				padding-left: 35upx;
				font-size: 30upx;
				line-height: 60upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(254, 254, 254, 1);
			}

			.data {
				margin: 0 30upx;

				.data_item {
					font-size: 28upx;
					line-height: 26upx;
					padding: 18upx 0 16upx;
					font-family: Microsoft YaHei;
					border-bottom: 4upx solid #E5E5E5;
					font-weight: 400;
					color: rgba(52, 52, 52, 1);
				}
			}

			.tu {
				margin: 20upx auto;
				width: 478upx;
				height: 290upx;

				image {
					width: 478upx;
					height: 290upx;
				}
			}

			.phone {
				margin: 0 30upx;

				.phone_box {
					display: flex;
					justify-content: space-between;
					border-bottom: 4upx solid #E5E5E5;
					line-height: 72upx;
					font-size: 28upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(52, 52, 52, 1);

					image {
						width: 50upx;
						height: 50upx;
						margin-top: 14upx;
					}
				}
			}
		}
	}
</style>
